{extend name="layout/default" /}
{block name="title"}软件列表{/block}
{block name="content"}
<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">选择软件</label>
                <div class="layui-input-inline">
                    <select name="sid" lay-search>
                        <option value="">直接选择或搜索选择</option>
                        {volist name="softList" id="vo"}
                        <option value="{$vo.id}">{$vo.name}</option>
                        {/volist}
                    </select>
                </div>
                <label class="layui-form-label">状态</label>
                <div class="layui-input-inline">
                    <select name="status">
                        <option value="">请选择状态</option>
                        <option value="0">启用</option>
                        <option value="1">禁用</option>
                    </select>
                </div>
                <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="dataQuery">
                    <i class="layui-icon layui-icon-search"></i>
                    查询
                </button>
                <button type="reset" class="pear-btn pear-btn-md">
                    <i class="layui-icon layui-icon-refresh"></i>
                    重置
                </button>
            </div>
        </form>
    </div>
</div>
<div class="layui-card">
    <div class="layui-card-body">
        <table id="dataTable" lay-filter="dataTable"></table>
    </div>
</div>

<script type="text/html" id="dataToolbar">
    <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
        <i class="layui-icon layui-icon-add-1"></i>
        新增
    </button>
    <button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
        <i class="layui-icon layui-icon-delete"></i>
        删除
    </button>
</script>

<script type="text/html" id="softwareBar">
    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
</script>

<script type="text/html" id="softwareStatus">
    <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="推送|不推送" lay-filter="softwareStatus" {{ (d.status == 0) && "checked" }}>
</script>

<script type="text/html" id="detailBtn">
    <button class="pear-btn pear-btn-primary pear-btn-xs" lay-event="detailConfig">查看</button>
</script>

<script type="text/html" id="detailView">
    <table class="layui-table" lay-size="sm">
        <colgroup>
            <col width="100">
            <col>
        </colgroup>
        <thead>
        <tr>
            <th>名称</th>
            <th>结果</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>软件名称</td>
            <td>{{ d.software.name }}</td>
        </tr>
        {{# layui.each(d.software.config, function(index, item){ }}
        <tr>
            <td>{{ item.cnname }}</td>
            <td>{{ item.type == "radio" ? (d.config[item.enname] == 0 ? "否" : "是") : d.config[item.enname] }}</td>
        </tr>
        {{# }); }}
        </tbody>
    </table>
</script>
{/block}

{block name="script"}
<script>
    layui.use(['table', 'form', 'jquery', 'common', 'popup', 'laytpl'], function() {
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let common = layui.common;
        let popup = layui.popup;
        let laytpl = layui.laytpl;
        let MODULE_PATH = "/{:request()->controller()}";

        let cols = [
            [
                {
                    type: 'checkbox'
                },
                {
                    title: '软件名称',
                    field: "soft_name",
                    align: 'left',
                    templet: function (d) {
                        return d.software.name;
                    }
                },
                {
                    title: '版本详情',
                    field: 'detail',
                    align: 'center',
                    templet: "#detailBtn"
                },
                {
                    title: '启用',
                    field: 'status',
                    align: 'center',
                    templet: '#softwareStatus'
                },
                {
                    title: '创建时间',
                    sort: true,
                    field: 'create_time',
                    align: 'center',
                },
                {
                    title: '操作',
                    toolbar: '#softwareBar',
                    align: 'center',
                    width: 150
                }
            ]
        ]

        table.render({
            elem: '#dataTable',
            url: MODULE_PATH + "/index",
            page: true,
            cols: cols,
            skin: 'line',
            toolbar: '#dataToolbar',
            cellMinWidth: 110,
            defaultToolbar: [{
                layEvent: 'refresh',
                icon: 'layui-icon-refresh',
            }, 'filter', 'print'],
            parseData: function(res){ //将原始数据解析成 table 组件所规定的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.data //解析数据列表
                };
            }
        });

        table.on('tool(dataTable)', function(obj) {
            let event = {
                edit: () => {
                    window.edit(obj);
                },
                remove: () => {
                    window.remove(obj);
                },
                detailConfig: () => {
                    window.detailConfig(obj);
                },
                default: () => {
                    console.log("[" + obj.event + "] 事件没有定义");
                }
            }
            let runEvent = obj && event[obj.event] ? event[obj.event] : event.default;
            runEvent();
        });

        table.on('toolbar(dataTable)', function(obj) {
            let event = {
                add: () => {
                    window.add();
                },
                refresh: () => {
                    window.refresh();
                },
                batchRemove: () => {
                    window.batchRemove(obj);
                },
                default: () => {
                    console.log("[" + obj.event + "] 事件没有定义");
                }
            }
            let runEvent = obj && event[obj.event] ? event[obj.event] : event.default;
            runEvent();
        });

        form.on('submit(dataQuery)', function(data) {
            table.reload('dataTable', {
                where: data.field,
                page:{ curr: 1 }
            });
            return false;
        });

        form.on('switch(softwareStatus)', function(obj) {
            let loading = layer.load();
            $.ajax({
                url: MODULE_PATH + "/setStatus",
                type: 'get',
                data: {id: this.value},
                success: function(res) {
                    layer.close(loading);
                    if(res.code === 0) {
                        popup.success(res.msg);
                    } else {
                        popup.failure(res.msg);
                    }
                }
            });
        });

        let iframeArea = [common.isModile()?'100%':'800px', common.isModile()?'100%':'600px'];

        window.add = function() {
            layer.open({
                type: 2,
                title: '新增',
                shade: 0.1,
                area: iframeArea,
                content: MODULE_PATH + "/add"
            });
        }

        window.edit = function(obj) {
            layer.open({
                type: 2,
                title: '修改',
                shade: 0.1,
                area: iframeArea,
                content: MODULE_PATH + "/edit?id=" + obj.data.id
            });
        }

        window.remove = function(obj) {
            layer.confirm('确定要删除该信息？', {
                icon: 3,
                title: '提示'
            }, function(index) {
                layer.close(index);
                let loading = layer.load();
                $.ajax({
                    url: MODULE_PATH + "/delete",
                    data: {ids: [obj.data.id]},
                    dataType: 'json',
                    type: 'post',
                    success: function(res) {
                        layer.close(loading);
                        if(Number(res.code) === 0){
                            popup.success(res.msg, function() {
                                obj.del();
                            });
                        } else {
                            popup.failure(res.msg);
                        }
                    },
                    error: function (res) {
                        layer.close(loading);
                        popup.failure("网络错误, 请重试");
                    }
                })
            });
        }

        window.batchRemove = function(obj) {
            let data = table.checkStatus(obj.config.id).data;
            if (data.length === 0) {
                popup.success("未选中数据");
                return false;
            }
            let ids = [];
            for (let i = 0; i < data.length; i++) {
                ids.push(data[i].id);
            }
            layer.confirm('确定要删除这些信息？', {
                icon: 3,
                title: '提示'
            }, function(index) {
                layer.close(index);
                let loading = layer.load();
                $.ajax({
                    url: MODULE_PATH + "/delete",
                    data: {ids},
                    dataType: 'json',
                    type: 'post',
                    success: function(res) {
                        layer.close(loading);
                        if(Number(res.code) === 0){
                            popup.success(res.msg, function() {
                                refresh();
                            });
                        } else {
                            popup.failure(res.msg);
                        }
                    },
                    error: function (res) {
                        layer.close(loading);
                        popup.failure("网络错误, 请重试");
                    }
                })
            });
        }

        window.refresh = function(param) {
            table.reload('dataTable');
        }

        window.detailConfig = function (obj) {
            let configTemplate = document.getElementById('detailView').innerHTML;
            laytpl(configTemplate).render(obj.data, function(html){
                layer.open({
                    type: 1,
                    title: '详情',
                    shade: 0.1,
                    area: [common.isModile()?'95%':'600px', common.isModile()?'80%':'300px'],
                    content: html
                });
            });

        }
    })
</script>
{/block}